<template>
  <div class="guide">
    <!--<button class="btn"  @click="next">{{text1}}</button>-->
    <div class="wrap" @click="active">
      <img v-for="(item,index) in img" :src="item.url" :key="index"  :class="index===currentTabIndex?'block':''" alt=""/>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'guide',
    data() {
      return {
        img: [
          {url: require('../../assets/imgs/guide/g1.png')},
          {url: require('../../assets/imgs/guide/g2.png')},
          {url: require('../../assets/imgs/guide/g3.png')}
        ],
        currentTabIndex: 0
//        text: '跳过'
      }
    },
    methods: {
      next(){
        this.$router.replace('/index')
      },
      active(){
        if(this.currentTabIndex!==2){
          this.currentTabIndex+=1;
        }else if(this.currentTabIndex===2){
          this.$router.replace('/index')
        }
      }
    }
//    computed:{
//     text1(){
//       if(this.currentTabIndex===4){
//         return '开始体验'
//       } else {
//         return '跳过'
//       }
//     }
//    }
  }
</script>
<style lang="scss" scoped>
  .guide {
    height: 100%;
    width: 100%;
    /*background: black;*/
    /*opacity: 0.2;*/
    .wrap{
      width: 100%;
      height:100%;
      img{
       width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        display: none;
      }
    }
    .btn{
      border:none;
      background: #1d9dff;
      padding: 5px;
      border-radius: 8px;
      font-size: 15px;
      color: white;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 500;
    }
    .block{
       display: block !important;
    }
  }

</style>
